import { Table } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import { getColumns } from './tableData.tsx'
import CommonDialog from '@/components/commonDialog'
import FormConfig from './formConfig'

const App: React.FC = ({ QueryData }) => {
    const [dialogOpen, setDialogOpen] = useState(false)
    const [data, setData] = useState([])

    const [dialogContent, setDialogContent] = useState<React.ReactNode>('')
    const [confirmLoading, setConfirmLoading] = useState(false)
    const formRef = useRef<any>(null)
    useEffect(() => {
        setData(QueryData)
    }, [QueryData])
    // 编辑操作，打开弹窗并设置内容
    const handleEdit = (name: string) => {
        setDialogContent(`你正在编辑：${name}`)
        setDialogOpen(true)
    }

    // 弹窗确定按钮，触发表单校验
    const handleDialogOk = async () => {
        if (formRef.current) {
            setConfirmLoading(true)
            try {
                // 获取表单数据
                const values = await formRef.current.submit()
                console.log('表单数据：', values)
                // 校验通过，关闭弹窗
                setDialogOpen(false)
                // 重置表单
                formRef.current?.reset()
            } catch (e) {
                // 校验未通过，不关闭弹窗
            }
            setConfirmLoading(false)
        }
    }

    const handleDialogCancel = () => {
        // 重置表单
        formRef.current?.reset()
        setDialogOpen(false)
    }

    return (
        <>
            <Table columns={getColumns(handleEdit)} dataSource={data} />
            <CommonDialog
                open={dialogOpen}
                title="编辑"
                confirmLoading={confirmLoading}
                onOk={handleDialogOk}
                onCancel={handleDialogCancel}
            >
                <FormConfig ref={formRef} />
            </CommonDialog>
        </>
    )
}

export default App
